<template>
  <div>
    <!-- <div class="item_title">
      <div>返回</div>
      <div>{{ movieObj.nm }}</div>
      <div></div>
    </div> -->
    <header1>{{ movieObj.nm }}</header1>
    <header2>19.9元起购票</header2>

    <div class="itemcon">
      <div><img :src="movieObj.img" alt="" /></div>
      <div class="rr">
        <p class="zz">{{ movieObj.nm }}</p>
        <p>{{ movieObj.nm }}</p>
        <p class="score">{{ movieObj.scoreLabel }}</p>
        <p>{{ movieObj.cat }}</p>
        <p>{{ movieObj.src }}</p>
        <p>{{ movieObj.pubDesc }}</p>
      </div>
      <div class="yy"><img src="../assets/img/jt.png" alt="" /></div>
    </div>
    <div class="date-list">
      <ul>
        <!-- 2.时间列表添加 点击事件 ，传参数 -->
        <li
          v-for="(item, index) in dateArr"
          :key="item.date"
          @click="getCinemaData(item.date, index)"
          :class="index == activeid ? 'active' : ''"
        >
          {{ item.date | format(index) }}
        </li>
      </ul>
    </div>
    <div class="qq">
      <div>
        全城
        <span class="sanjiao"></span>
      </div>
      <div class="tt">
        品牌
        <span class="sanjiao"></span>
      </div>
      <div>
        特色
        <span class="sanjiao"></span>
      </div>
    </div>
    <div>
      <div class="item" data-bid="dp_wx_home_cinema_list" v-for="item in cinemaArr" :key="item.id">
        <div class="title-wrap">
          <div class="title-block">
            <div class="title line-ellipsis">
              <span>{{item.nm||'--'}}</span>
            </div>
            <div class="price-block">
              <span class="price">{{item.price}}</span><span class="after">元起</span>
            </div>
          </div>
          <div class="location-block">
            <div class="line-ellipsis">
              {{item.addr}}
            </div>
          </div>
          <div class="label-block">
            <div class="allowRefund" v-for="(item1,index) in item.labels" :key="index">{{item1.name}}</div>
          </div>
          <div class="discount-block">
            <div class="discount">
              <div class="discount-label cardPromotionTag"></div>
              <div class="discount-label-text">
                {{item.promotion.cardPromotionTag}}
              </div>
            </div>
          </div>
        </div>
        <div class="recent" data-bid="dp_wx_buy_cinema_list_spread">
          <span>近期场次：</span>
          <span class="time-line" v-for="(item2,index) in item.showTimes.split('|')" :key="index">{{item2}}</span>
        </div>
        <div class="lazyload-wrapper"><div></div></div>
      </div>
    </div>
    <!-- 影院信息 -->
    <!-- <ul class="cinemalist">
      <li v-for="item in cinemaArr" :key="item.id">{{ item.nm }}</li>
     没有写完?
    </ul> -->
    <!-- <ul>
 <li v-for="item in cinemaArr" :key="item.id">{{ item.addr }}</li>
    </ul> -->
  </div>
</template>

<script>
import axios from "axios";
import header1 from "@/components/header1";
import header2 from "@/components/header2";
export default {
  name: "item",
  data: function () {
    return {
      movieObj: {}, //电影的一条记录
      dateArr: [], //保存上映日期的数据
      cinemaArr: [], //影院信息
      id: 0, //电影id
      activeid: 0, //当前是第几天
    };
  },
  filters: {
    //过滤器  将 年月日转成  星期再加 月日
    //bug: 获取 今天的日期  ，和  传过来的日期比较
    format(value, index) {
      //console.log("过滤器触发了");
      var arr = value.split("-");
      var str = "";
      var jintian = ["今天", "明天", "后天"];
      if (index < 3) {
        str += jintian[index];
      } else {
        str += `周${"日一二三四五六".charAt(new Date(value).getDay())}`;
      }
      str += `${arr[1]}月${arr[2]}日`;
      return str;
    },
  },
  methods: {
    //重新获取影院数据
    getCinemaData(date, index) {
      this.activeid = index;
      this.getData(date);
    },
    getData(date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=" +
            this.id +
            "&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          // debugger;
          //console.log(res);
          //获取了新数据会给  this.cinemaArr 重新赋值，页面就会重新渲染
          this.cinemaArr = res.data.data.cinemas;
        });
    },
  },
  mounted() {
    //获取 首页传过来的参数
    this.id = this.$route.params.id;
    axios.get("/api/mtrade/mmdb/movie/v5/" + this.id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "110.150");
    });

    //获取 上映日期的数据
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
          this.id +
          "&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        //1.获取影院信息
        this.getData(this.dateArr[0].date);
      });
  },
  components: {
    header1,
    header2,
  },
};
</script>

<style scoped>
.qq {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
}
.tt {
  width: 125px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
}
.sanjiao {
  width: 0;
  height: 0;
  border: 4px solid #b0b0b0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  display: inline-block;
  margin-top: 5px;
  margin-left: 4px;
}
.cinemalist li {
  width: 100%;
  height: 143px;
  background: lightgoldenrodyellow;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.date-list {
  width: 100%;
  height: 45px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  overflow: scroll;
}
.date-list ul {
  width: 1200px;
  display: flex;
}
.date-list ul li {
  width: 130px;
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.date-list ul li.active {
  border-bottom: 2px solid #f03d37;
  color: #f03d37;
}
.item_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e54848;
  display: flex;
  justify-content: space-around;
}
.item_title div:nth-of-type(1),
.item_title div:nth-of-type(3) {
  width: 15%;
  text-align: center;
}
.item_title div:nth-of-type(2) {
  width: 70%;
  text-align: center;
}

.itemcon {
  background-color: #f5f5f9;
  display: flex;
  padding: 19px 30px 19px 15px;
  height: 150px;
}
.rr {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  margin-left: 12.5px;
  line-height: 1;
  font-size: 12px;
}
.zz {
  font-size: 20px;
  font-weight: 700;
}
.score {
  font-size: 18px;
  font-weight: 700;
  color: #fc0;
}
.yy {
  position: relative;
}
.yy img {
  position: absolute;
  left: 55px;
  top: 60px;
  width: 15px;
  height: 15px;
}
/* .item{
   width: 100%;
  height: 143px;
  background: lightgoldenrodyellow;
  border-bottom: 1px solid #ccc;
  position: relative;
    padding: 13px 15px 13px 0;
    margin-left: 15px;
     
   text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.title-block{
  display: flex;
  height:27px;
  
 
}
.ab{
  height:23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
}

.price{
  margin-left: 100px;
    padding-left: 3px;
    color: #f03d37;
    font-size: 18px;
}
.line-ellipsis{
  font-size: 13px;
  color:#666;
  text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.price-block{
  display: inline-block;
    padding-left: 3px;
    color: #f03d37;
}
.after{
  font-size: 12px;
  color: #f03d37;
}
.label-block{
  display: flex;

}

.allowRefund{
  
  width:20px;
  height:17px;
  border: 1px solid #589daf;
  color: #589daf;
  border-radius: 2px;
  font-size: 12px;
}
.recent{
  padding: 0 15px 0 0;
    margin-right: -15px;
    line-height: 1.5;
    font-size: 0;
}
.discount-label-text{
  margin-left: 5px;
    font-size: 11px;
    color:#666;

} */


/* .page-cinema-movie .cinema-wrap {
    margin-top: 0;
    background-color: #fff
}

.page-cinema-movie .cinema-wrap .list-wrap {
    background-color: #fff
} */

.item {
    position: relative;
    padding: 13px 15px 13px 0;
    margin-left: 15px;
    overflow: hidden
}

.item:after {
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5)
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label {
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    background-size: contain
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label.used {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/used.594b2f8d.png)
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label.fav {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/fav.cf021c57.png)
}

.page-cinema-movie .cinema-wrap .list-wrap .item .icon-label.vip {
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/vip.effda0cb.png)
}

 .item .title-wrap {
    line-height: 1.5
}

.item .title-wrap .title-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.item .title-wrap .title-block .title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 23px;
    line-height: 23px;
    font-size: 16px;
    color: #000
}

.item .title-wrap .title-block .price-block {
    display: inline-block;
    padding-left: 3px;
    color: #f03d37
}

.item .title-wrap .title-block .price-block .price {
    font-size: 18px
}

.item .title-wrap .title-block .price-block .after {
    padding-left: 3px;
    font-size: 11px
}

.item .title-wrap .location-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 13px;
    color: #666
}

.item .title-wrap .label-block {
    height: 17px;
    line-height: 17px;
    margin-top: 4px;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.item .title-wrap .label-block>div {
    position: relative;
    display: inline-block;
    padding: 0 3px;
    height: 15px;
    line-height: 15px;
    border-radius: 2px;
    font-size: 12px
}

 .item .title-wrap .label-block>div+div {
    margin-left: 5px
}

.item .title-wrap .label-block .allowRefund,.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .label-block .endorse,.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .label-block .hallType,.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .label-block .sell {
    color: #589daf;
    border: 1px solid #589daf
}

.item .title-wrap .label-block .snack,.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .label-block .vipTag {
    color: #f90;
    border: 1px solid #f90
}

.item .title-wrap .discount-block {
    color: #999;
    margin-bottom: 4px
}

 .item .title-wrap .discount-block .discount {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.item .title-wrap .discount-block .discount .discount-label {
    width: 15px;
    height: 14px
}
.item .title-wrap .discount-block .discount .discount-label.cardPromotionTag {
    background: url();
    background-size: 100% 100%
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .discount-block .discount .discount-label.platformActivityTag {
    background: url();
    background-size: 100% 100%
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .discount-block .discount .discount-label.couponPromotionTag {
    background: url();
    background-size: 100% 100%
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .discount-block .discount .discount-label.merchantActivityTag {
    background: url();
    background-size: 100% 100%
}

.page-cinema-movie .cinema-wrap .list-wrap .item .title-wrap .discount-block .discount .discount-label.starActivityTag {
    background: url();
    background-size: 100% 100%
}

.item .title-wrap .discount-block .discount .discount-label-text {
    margin-left: 5px;
    font-size: 11px
}

.item .recent {
    padding: 0 15px 0 0;
    margin-right: -15px;
    line-height: 1.5;
    font-size: 0
}
.item .recent>span {
    font-size: 12px;
    color: #999
}

.item .recent>span.time-line {
    display: inline-block;
    position: relative
}

.item .recent>span.time-line+span.time-line {
    margin-left: 14px
}
.item .recent>span.time-line+span.time-line:before {
    content: "";
    display: block;
    position: absolute;
    height: 15px;
    width: 1px;
    left: -7px;
    background: #e1e1e1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.item .recent .unfold {
    float: right
}

.item .recent .unfold .arrow-img {
    display: inline-block;
    width: 13px;
    background: url();
    background-size: 100% 100%
}

/* .page-cinema-movie .cinema-wrap .list-wrap .empty {
    height: 40px;
    line-height: 40px;
    text-align: center
}

.page-cinema-movie .cinema-wrap .no-cinema {
    width: 50%;
    padding-top: 20%;
    margin: auto
}

.page-cinema-movie .cinema-wrap .no-cinema .no-img {
    width: 40%;
    height: 86px;
    margin: auto;
    background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/no-cinema.b39c6067.png);
    background-size: 100% 100%
}

.page-cinema-movie .cinema-wrap .no-cinema .no-cinema-tip {
    margin-top: 10px;
    text-align: center
}

.page-cinema-movie .cinema-wrap .load {
    height: 40px;
    background: #fff
}

.page-cinema-movie .cinema-wrap .load.appear {
    display: block
}

.page-cinema-movie .nav-wrap {
    height: 40px
}

.page-cinema-movie .filter-nav {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #fff;
    z-index: 11
}

.page-cinema-movie .filter-nav .tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.page-cinema-movie .filter-nav .tab:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5)
}

.page-cinema-movie .filter-nav .tab:after {
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5)
}

.page-cinema-movie .filter-nav .tab .item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    text-align: center;
    font-size: 13px;
    line-height: 40px
}

.page-cinema-movie .filter-nav .tab .chosen {
    color: #e54847
}

.page-cinema-movie .filter-nav .tab .chosen .drop {
    border-bottom-color: #f03d37;
    border-top-color: rgba(0,0,0,0);
    top: 14px
}

.page-cinema-movie .filter-nav .tab .item+.item:before {
    content: "";
    display: block;
    position: absolute;
    height: 20px;
    top: 10px;
    left: 0;
    border-left: 1px solid #e8e8e8
}

.page-cinema-movie .filter-nav .tab .drop {
    display: inline-block;
    position: absolute;
    top: 18px;
    width: 0;
    height: 0;
    margin-left: 4px;
    border: 4px solid rgba(0,0,0,0);
    border-top-color: #b0b0b0
}

.page-cinema-movie .filter-nav .close-tab {
    position: relative;
    width: 100%;
    background: #fff;
    z-index: 100
}

.page-cinema-movie .filter-nav .close-tab .region {
    min-height: 150px;
    font-size: 15px
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab {
    height: 44px
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab .title-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 44px
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab .title-tab .item {
    width: 50%;
    line-height: 44px;
    text-align: center
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab .title-tab .chosen {
    position: relative;
    color: #f03d37
}

.page-cinema-movie .filter-nav .close-tab .region .region-tab .title-tab .chosen:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 90%;
    border-top: 2px solid #f03d37
}

.page-cinema-movie .filter-nav .close-tab .region .region-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 380px;
    background: #f5f5f5
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-sidenav {
    width: 35%;
    height: 100%;
    overflow: scroll
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-sidenav .district,.page-cinema-movie .filter-nav .close-tab .region .region-list .region-sidenav .subway {
    min-height: 100%;
    background-color: #fff
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-sidenav .district-item {
    height: 44px;
    padding-left: 10px;
    line-height: 44px;
    font-size: 14px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-sidenav .district-item.chosen {
    color: #f03d37;
    background: #f5f5f5
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-list-item {
    width: 65%;
    height: 100%;
    overflow: scroll
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-list-item .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    height: 45px;
    line-height: 45px;
    padding: 0 25px
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-list-item .item span {
    display: inline-block
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-list-item .item.chosen {
    color: #f03d37
}

.page-cinema-movie .filter-nav .close-tab .region .region-list .region-list-item .item.chosen:before {
    content: "";
    display: block;
    position: absolute;
    left: 8px;
    top: 18px;
    width: 11.5px;
    height: 8px;
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/chosen.750a49ba.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.page-cinema-movie .filter-nav .close-tab .brand {
    min-height: 150px;
    max-height: 352px;
    font-size: 15px;
    overflow: scroll
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    line-height: 44px;
    height: 44px;
    padding: 0 15px 0 26px;
    color: #333
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item.chosen {
    color: #dd403b
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item.chosen:before {
    content: "";
    display: block;
    position: absolute;
    left: 8px;
    top: 18px;
    width: 11.5px;
    height: 8px;
    background-image: url(https://obj.pipi.cn/festatic/fe-trade/public/img/chosen.750a49ba.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item:not(:last-child):after {
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5)
}

.page-cinema-movie .filter-nav .close-tab .brand .brand-item span {
    display: inline-block
}

.page-cinema-movie .filter-nav .close-tab .special {
    min-height: 208px
}

.page-cinema-movie .filter-nav .close-tab .special .special-content {
    min-height: 150px;
    max-height: 270px;
    overflow: scroll
}

.page-cinema-movie .filter-nav .close-tab .special .special-content .item-wrapper {
    margin: 11px 12px 12px
}

.page-cinema-movie .filter-nav .close-tab .special .special-content .item-wrapper .item-title {
    font-size: 15px
}

.page-cinema-movie .filter-nav .close-tab .special .special-content .item-wrapper .item-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.page-cinema-movie .filter-nav .close-tab .special .special-content .item-wrapper .item-list .item {
    width: 21.3%;
    height: 30px;
    padding: 3px 0;
    margin-right: 3%;
    margin-top: 10px;
    line-height: 30px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px
}

.page-cinema-movie .filter-nav .close-tab .special .special-content .item-wrapper .item-list .item.chosen {
    background: #fcf0f0;
    color: #f03d37;
    border: 1px solid #f03d37
}

.page-cinema-movie .filter-nav .close-tab .special .special-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 60px;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
    background: #fafafa
}

.page-cinema-movie .filter-nav .close-tab .special .special-btn .btn {
    display: inline-block;
    height: 34px;
    width: 21.3%;
    margin: 13px 11px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-align: center;
    line-height: 34px;
    font-size: 14px
}

.page-cinema-movie .filter-nav .close-tab .special .special-btn .define-btn {
    background: #f03d37;
    border: 1px solid #f03d37;
    color: #fff
}

.page-cinema-movie .filter-nav .noItem {
    line-height: 150px;
    text-align: center;
    font-size: 15px;
    color: #999
}

.page-cinema-movie .region-fixed {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%
}

.page-cinema-movie .region-fixed.only-fixed {
    top: 0
}

.page-cinema-movie .nav-fixed {
    position: fixed;
    top: 95px;
    left: 0;
    width: 100%
}

.page-cinema-movie .nav-fixed.only-nav {
    top: 45px
}

.page-cinema-movie .locatebanner {
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 8px;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background: hsla(0,0%,93.7%,.9);
    color: #666;
    font-size: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    margin: 0 12px env(safe-area-inset-bottom)
}

.page-cinema-movie .locatebanner-arrow {
    margin-top: 11px;
    margin-right: 5px;
    width: 14px;
    height: 14px;
    background: url();
    background-size: 100% 100%
}

.page-cinema-movie .locatebanner-refresh-wrap {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: right
}

.page-cinema-movie .locatebanner-refresh {
    display: inline-block;
    margin-top: 2px;
    width: 14px;
    height: 14px;
    background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/refresh.163f2101.png);
    background-size: 100% 100%
}

.page-cinema-movie .city-entry-arrow {
    width: 0;
    height: 0;
    border: 4px solid rgba(0,0,0,0);
    border-top-color: #b0b0b0;
    display: inline-block;
    margin-left: 4px;
    margin-right: 5px;
    margin-top: 5px
}

.page-cinema-movie .movie-wrapper .mark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    z-index: 10
}

.page-cinema-movie .movie-wrapper .locate-dis {
    display: none
}

.fixed {
    height: 100%;
    overflow: hidden
}
.page-cinema-movie .cinema-wrap{
  margin-top: 0;
    background-color: #fff;
}  */

</style>